<template>
	<view>
		<!-- <view style="margin-left: 223rpx;margin-top: 20rpx;">
			<uploader @input="onChange" :max="1" />
		</view> -->
		<view class="install-container" style="margin-bottom: 30rpx;">

			<!-- 用户信息 -->
			<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
			这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
			<uni-forms :value="params['公司']" ref="form" validateTrigger="bind" class="word5">
				<uni-forms-item required label="企业名称" name="企业名称">
					<input maxlength="50" placeholder="请输入企业名称" v-model="params['公司']['企业名称']" @input="binddata('企业名称',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="法人代表：" name="法定代表人">
					<input maxlength="50" v-model="params['公司']['法定代表人']" placeholder="请输入法人代表" @input="binddata('法定代表人',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="企业地址" name="地址">
					<choose-address @location="getLocation" placeholder="请输入企业地址" v-model="params['公司']['地址']" @input="binddata('地址',$event)"></choose-address>
					<!-- <input @focus="getLocation" maxlength="50" placeholder="请输入企业地址" v-model="params['公司']['地址']" @input="binddata('地址',$event.detail.value)"> -->
				</uni-forms-item>
				<uni-forms-item required label="安全负责人：" name="企业安全负责人">
					<input maxlength="50" placeholder="请输入安全负责人" v-model="params['公司']['企业安全负责人']" @input="binddata('企业安全负责人',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="联系电话：" name="负责人电话">
					<input maxlength="18" placeholder="请输入联系电话" v-model="params['公司']['负责人电话']" @input="binddata('负责人电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房东姓名：" name="房东姓名">
					<input maxlength="50" placeholder="请输入房东姓名" v-model="params['公司']['房东姓名']" @input="binddata('房东姓名',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="房东电话：" name="房东电话">
					<input maxlength="18" placeholder="请输入房东电话" v-model="params['公司']['房东电话']" @input="binddata('房东电话',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required label="社会信用代码：" name="统一社会信用代码">
					<input maxlength="18" v-model="params['公司']['统一社会信用代码']" placeholder="请输入社会信用代码" @input="binddata('统一社会信用代码',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item required name="经营状态" label="经营状态：">
					<uni-data-checkbox v-model="params['公司']['经营状态']" :localdata="status"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required name="消防重点关注对象" label="消防重点对象：">
					<uni-data-checkbox v-model="params['公司']['消防重点关注对象']" :localdata="keynoteStatus"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item required label="资质有效期开始" name="资质有效期开始时间">
					<date-picker v-model="params['公司']['资质有效期开始时间']" placeHolder="经营资质有效期开始时间" @input="binddata('资质有效期开始时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item required label="资质有效期结束" name="资质有效期结束时间">
					<date-picker v-model="params['公司']['资质有效期结束时间']" placeHolder="经营资质有效期结束时间" @input="binddata('资质有效期结束时间',$event)"></date-picker>
				</uni-forms-item>
				<uni-forms-item label="营业执照照片" name="营业执照照片">
					<upload :max="1" v-model="params['公司']['营业执照照片']" />
				</uni-forms-item>
				<uni-forms-item label="安全责任书" name="安全生产责任书">
					<upload :max="1" v-model="params['公司']['安全生产责任书']" />
				</uni-forms-item>
				<uni-forms-item label="成立时间：" name="成立日期">
					<date-picker placeHolder="请填写成立时间" v-model="params['公司']['成立日期']"></date-picker>
				</uni-forms-item>
				<uni-forms-item label="核准日期" name="核实日期">
					<date-picker placeHolder="请填写核验日期" v-model="params['公司']['核实日期']"></date-picker>
				</uni-forms-item>
				<!-- <uni-forms-item label="经营期限" name="value">
					<view :class="label == '请选择经营期限' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
					<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('value',$event)" v-model="params['公司']['经营期限']"
					 mode="selector" :list="installTypeList" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item> -->
				<uni-forms-item label="企业人数：" name="企业人数">
					<input type="number" maxlength="18" placeholder="请输入企业人数" v-model="params['公司']['企业人数']" @input="binddata('location',$event.detail.value)">
				</uni-forms-item>
				<uni-forms-item label="企业登记类型：" name="企业登记类型">
					<view :class="label == '请选择企业登记类型' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
					<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('value',$event)" v-model="params['公司']['企业登记类型']"
					 mode="selector" :list="companyType" :dataset="{ name: 'label' }" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</uni-forms-item>
				<uni-forms-item label="工作区域面积：" name="工作区域面积">
					<input type="number" placeholder="请输入工作区域面积" v-model="params['公司']['工作区域面积']">
				</uni-forms-item>
				<uni-forms-item label="备注信息：" name="备注">
					<input placeholder="请输入备注信息" v-model="params['公司']['备注']">
				</uni-forms-item>
				<button class="grid-btn" @click="submitForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import upload from './upload.vue'
	import uploader from '../myComponents/image-uploader.vue'
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from './lb-picker/index.vue'
	import ResidentInfo from './residentInfo.vue'
	import ChooseAddress from '../myComponents/chooseAddress.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			upload,
			uploader,
			DatePicker,
			LbPicker,
			ResidentInfo,
			ChooseAddress
		},
		data() {
			return {
				label: '请选择企业登记类型',
				installTypeList: this.$type.installTypeList,
				params: {
					所属网格id: null,
					lagitude: null,
					longitude: null,
					检查点类型: 'company',
					公司: {
						企业名称: '',
						法定代表人: null,
						成立日期: null,
						资质有效期开始时间: null,
						资质有效期结束时间: null,
						营业执照照片: [],
						安全生产责任书: [],
						经营期限: null,
						地址: '',
						企业安全负责人: null,
						房东姓名: null,
						房东电话: null,
						企业人数: null,
						统一社会信用代码: null,
						经营状态: null,
						核实日期: null,
						企业登记类型: null,
						登记机关: null,
						负责人电话: null,
						工作区域面积: null,
						消防重点关注对象: null,
						备注: null,
						照片上传: null
					}
				},
				companyType: this.$type.companyType,
				keynoteStatus: [{
						text: '是',
						value: true
					},
					{
						text: '否',
						value: false
					}
				],
				status: [{
						text: '续存',
						value: '续存'
					},
					{
						text: '停业',
						value: '停业'
					}
				],
				//表单验证规则
				rules: {
					企业名称: {
						rules: [{
							required: true,
							errorMessage: '请填写企业名称',
						}]
					},
					法定代表人: {
						rules: [{
							required: true,
							errorMessage: '请填写法定代表人',
						}]
					},
					地址: {
						rules: [{
							required: true,
							errorMessage: '请填写企业地址',
						}]
					},
					企业安全负责人: {
						rules: [{
							required: true,
							errorMessage: '请填写企业安全负责人',
						}]
					},
					负责人电话: {
						rules: [{
							required: true,
							errorMessage: '请填写负责人电话',
						}, {

						}]
					},
					房东姓名: {
						rules: [{
							required: true,
							errorMessage: '请填写房东姓名',
						}, {
					
						}]
					},
					房东电话: {
						rules: [{
							required: true,
							errorMessage: '请填写房东电话',
						}, {
					
						}]
					},
					消防重点关注对象: {
						rules: [{
							required: true,
							format: 'string',
							errorMessage: '请选择是否是消防重点对象',
						}]
					},
					统一社会信用代码: {
						rules: [{
							required: true,
							errorMessage: '请填写社会信用代码',
						}]
					},
					经营状态: {
						rules: [{
							required: true,
							format: 'string',
							errorMessage: '请选择经营状态',
						}]
					},
					资质有效期开始时间: {
						rules: [{
							required: true,
							errorMessage: '请填写经营资质有效期开始时间',
						}]
					},
					资质有效期结束时间: {
						rules: [{
							required: true,
							errorMessage: '请填写经营资质有效期结束时间',
						}]
					},
					企业安全负责人: {
						rules: [{
							required: true,
							errorMessage: '请填写企业安全负责人',
						}]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		created() {
			this.params.所属网格id = uni.getStorageSync('gridInfo').所属网格id 
		},
		methods: {
			getLocation(event) {
				this.params.lagitude = event.latitude
				this.params.longitude = event.longitude
				this.params.公司.地址 = event.address
			},
			onChange(e) {
				this.params.照片上传 = e
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					console.log(this.value1, '值')
					this.params.公司.企业类型 = e.item.value
					// this.params4.education = e.item.id
					if (name && label) {
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					console.log(res)
					if(res.成立日期 !== null) {
						res.成立日期 = dayjs(this.params.公司.成立日期).format('YYYY-MM-DDTHH:mm:ssZ')
					}
					if(res.核实日期 !== null) {
						res.核实日期 = dayjs(this.params.公司.核实日期).format('YYYY-MM-DDTHH:mm:ssZ')
					}
					if(res.资质有效期开始时间 !== null) {
						res.资质有效期开始时间 = dayjs(this.params.公司.资质有效期开始时间).format('YYYY-MM-DDTHH:mm:ssZ')
					}
					if(res.资质有效期结束时间 !== null) {
						res.资质有效期结束时间 = dayjs(this.params.公司.资质有效期结束时间).format('YYYY-MM-DDTHH:mm:ssZ')	
					}
					if(res.资质有效期开始时间 && res.资质有效期结束时间) {
						let startTime = new Date(dayjs(res.资质有效期开始时间).format('YYYY-MM-DD')).getTime()
						let endTime = new Date(dayjs(res.资质有效期结束时间).format('YYYY-MM-DD')).getTime()
						if(startTime - endTime > 0) {
							uni.showToast({
								title: '资质有效期结束时间不得早于开始时间',
								icon: 'none'
							})
							return
						}
					}
					if(res.成立日期 && res.核实日期) {
						let startTime = new Date(dayjs(res.成立日期).format('YYYY-MM-DD')).getTime()
						let endTime = new Date(dayjs(res.核实日期).format('YYYY-MM-DD')).getTime()
						if(startTime - endTime > 0) {
							uni.showToast({
								title: '核实日期不得早于成立日期',
								icon: 'none'
							})
							return
						}
					}
					//console.log(s2)
					res.企业人数 = res.企业人数 && parseInt(res.企业人数)
					res.工作区域面积 = res.工作区域面积 && parseFloat(res.工作区域面积)
					this.$emit('submit', Object.assign({},this.params,{公司: res}))
					console.log(Object.assign({},this.params,{公司: res}))
					// if (!this.resident.picture) {
					// 	uni.showToast({
					// 		icon: 'none',
					// 		title: "请上传正面照片"
					// 	})
					// 	return
					// }
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.color {
		color: #808080;
	}

	.install-container {
		padding-bottom: 90rpx;
	}
</style>
